<template>
  <div class="addStudent">
    <el-dialog title="编辑考官" :lock-scroll="false" :close-on-click-modal="false" :fullscreen="true"
      :visible.sync="editVisable" width="860px" :before-close="close">
      <div class="content">
        <div class="top">
          <p>考官列表</p>
          <div class="base-info">
            <el-form class="search-form" :inline="true" :model="searchForm" @keyup.enter.native="getTeacherList(1)">
              <el-form-item>
                <el-input v-model="searchForm.name" placeholder="考官姓名" clearable style="width: 160px"></el-input>
              </el-form-item>
              <el-form-item>
                <div class="flex-start" style="align-items: flex-start">
                  <el-button type="primary" @click="getTeacherList(1)" icon="el-icon-search">查询</el-button>
                  <el-button @click="clearHandle()" icon="el-icon-delete-solid">清空</el-button>
                </div>
              </el-form-item>
              <br/>
              <el-form-item>
                <div class="flex-start" style="align-items: flex-start">
                  <el-button :disabled='selectDataList.length == 0' type="danger" @click="delItem('branch')" icon="el-icon-delete-solid">删除</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="mid">
          <el-table :data="dataList" :height="tableHeight" border size="mini" style="width: 100%" height='30%'
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="序号" type="index" fixed="left" header-align="center" align="center" width="70">
            </el-table-column>
            <el-table-column minWidth="130" prop="teacherName" fixed="left" header-align="center" align="center" label="考官姓名" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column minWidth="130" prop="teacherMobile" header-align="center" align="center" label="手机号">
            </el-table-column>
            <el-table-column minWidth="130" prop="deptName" header-align="center" align="center" label="科室">
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="80">
              <template slot-scope="scope">
                <el-button title="删除" icon="icon iconfont icon-shanchu" type="danger" circle size="mini"
                  @click='delItem(scope.row)'></el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="bot">
          <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
            :page-sizes="[20, 100, 500]" :page-size="pageSize" :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {studentList, deletePoolStudent} from '@/api/examiner.js'
export default{
  props: {
    editVisable: {
      type: Boolean,
      default: false
    },
    examineeObj: {
      type: Object,
      default: {}
    },
    tableHeight: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      dataList: [],
      selectDataList: [],
      searchForm: {

      },
      pageIndex: 1,
      pageSize: 20,
      totalPage: 0
    }
  },
  methods: {
    close () {
      this.$emit('child-event')
    },
    getTeacherList (page) {
      if (page) {
        this.pageIndex = page
      }

      studentList({
        page: this.pageIndex,
        limit: this.pageSize,
        teacherName: this.searchForm.name,
        teacherPoolId: this.examineeObj.id,
        orderSql: 'creat_date desc'
      }).then(res => {
        this.dataList = res.data.page.records
        this.totalPage = res.data.page.total
      })
    },

    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getTeacherList()
    },

    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getTeacherList()
    },
    clearHandle () {
      this.searchForm = {}
      this.pageIndex = 1
      this.getTeacherList()
    },
    handleSelectionChange (val) {
      this.selectDataList = val
    },
    // 导出
    exportData () {
      this.$http({
        url: '/excel/teacher/getByInspectId',
        method: 'get',
        responseType: 'blob',
        params: { inspectId: this.examineeObj.id }
      }).then(({ data }) => {
        var binaryData = []
        binaryData.push(data)
        let blob = new Blob(binaryData, {
          type: ' application/vnd.ms-excel '
        })
        console.log(blob)
        setTimeout(() => {
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(blob, 'link')
          } else {
            const link = document.createElement('a')
            console.log(window.URL.createObjectURL)

            link.download = this.examineeObj.name
            link.style.display = 'none'
            link.href = window.URL.createObjectURL(blob)
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
            this.$message.success(`${this.examineeObj.name}导出成功`)
          }
        })
        // console.log(data)
        // const url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel;charset=utf8' }))
        // const link = document.createElement('a')
        // link.href = url
        // link.setAttribute('download', 'example.xls')
        // document.body.appendChild(link)
        // link.click()
        // document.body.removeChild(link)
      }).catch(err => {
        console.log(err)
      })
    },
    delItem (val) {
      const h = this.$createElement
      this.$msgbox({
        title: '删除',
        message: h('p', {style: 'width: 400px;'}, [
          h('span', {class: 'icon iconfont icon-shanchu', style: 'color: #d50000;padding-right: 10px;font-size: 20px;font-weight:600;'}, ''),
          h('span', { style: 'color: #666' }, '请确认是否删除?')
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '执行中...'
            let params = {
              teacherPoolId: this.examineeObj.id
            }
            if (val === 'branch') {
              let aaa = []
              this.selectDataList.map(item => {
                aaa.push({id: item.id})
              })
              params.teachers = JSON.parse(JSON.stringify(aaa))
            } else {
              params.teachers = [{id: val.id}]
            }
            deletePoolStudent(params).then(res => {
              done()
              instance.confirmButtonLoading = false
              this.$message.success('操作成功')
              this.getTeacherList()
            }).catch(err => {
              console.log(err)
              done()
              instance.confirmButtonLoading = false
            })
          } else {
            done()
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
.addStudent{
  .el-dialog__body{
    background: #f5f5f5;
    height: calc(100vh - 50px);
  }
}
.content{
  height: 100%;
  background: #fff;
  overflow: auto;
  padding: 10px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  color: #333;
  display: flex;
  flex-direction: column;
  .top{
    p{
      font-weight: 600;
      font-size: 16px;
      text-indent: 10px;
      position: relative;
      padding: 0;
      margin: 0;
    }
    p:before{
      content: '';
      height: 100%;
      width: 4px;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: 0;
      background: #00b99e;
      font-size: 14px;
    }
    .base-info{
      padding: 10px 0 10px 10px;
      display: flex;
      justify-content: flex-start;
    }
  }
  .mid{
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    p:before{
      content: '';
      height: 20px;
      width: 4px;
      border-radius: 4px;
      position: absolute;
      left: 0;
      top: 8px;
      background: #00b99e;
    }
    .mid-bot{
      flex: 1;
      overflow: auto;
      padding: 10px;
    }
  }
  .bot{
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  
}
</style>